import React, { Component } from 'react';
import { View, Text, TextInput, TouchableOpacity, ScrollView, Image } from 'react-native';
import THNav from "../../../../../components/THNav";
import { pxToDp } from '../../../../../utils/stylesKits';
import IconFont from "../../../../../components/IconFont";
import Geo from "../../../../../utils/Geo";
import ImagePicker from 'react-native-image-picker';
import Toast from '../../../../../utils/Toast';
import { ActionSheet } from "teaset";
import Emotion from "../../../../../components/Emotion";
import { QZ_IMG_UPLOAD, QZ_DT_PUBLISH } from "../../../../../utils/pathMap";
import request from "../../../../../utils/request";

class Index extends Component {

    state = {
        textContent: "",
        // 经度
        longitude: "",
        // 纬度
        latitude: "",
        // 详细地址
        location: "",
        // imageContent: [
        //     {
        //         "headImgShortPath": "/upload/album/18665711978/1576633170560_0.9746430185850421.jpg"
        //     }
        // ],
        // 临时图片数组
        tmpImgList: [],
        showEmotion: false
    }

    constructor() {
        super()
        this.refInput = React.createRef();
    }

    // 设置输入框获得焦点
    handleSetInputFocus = () => {
        // console.log(this.refInput);
        if (!this.refInput.isFocused()) {
            this.refInput.focus();
        }
    }

    // 输入框的值改变事件
    onChangeText = (textContent) => {
        this.setState({ textContent });
    }

    // 获取当前定位
    getCurrentPosition = async () => {
        const res = await Geo.getCityByLocation();
        // console.log(res);
        const { province, city, district, township, streetNumber } = res.regeocode.addressComponent;
        this.setState({
            location: province + city + district + township,
            longitude: streetNumber.location.split(',')[0],
            latitude: streetNumber.location.split(',')[1]
        });
    }

    // 选择图片 拍摄或者选择相册中
    handleSelectImage = () => {
        const options = {
            title: '选择图片',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照',
            chooseFromLibraryButtonTitle: '相册',
            storageOptions: {
                skipBackup: true,
                path: 'images',
            },
        };

        ImagePicker.showImagePicker(options, (response) => {

            const { data, ...others } = response

            if (response.didCancel) {
                console.log('User cancelled image picker');
            } else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            } else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            } else {
                const { tmpImgList } = this.state;
                // 图片数量不能超过9
                if (tmpImgList.length >= 9) {
                    Toast.message('图片数量不能超过9')
                    return;
                }
                tmpImgList.push(response);
                this.setState({ tmpImgList });
            }
        });
    }

    // 点击图片 进行删除
    handleImageRemove = (i) => {
        const imgDelete = () => {
            const { tmpImgList } = this.state;
            tmpImgList.splice(i, 1);
            this.setState({ tmpImgList });
            Toast.smile('删除成功')
        }
        const opts = [
            { title: '删除', onPress: imgDelete }
        ]
        ActionSheet.show(opts, { title: '取消' })
    }

    // 选择表情
    handleEmotionSelect = (value) => {
        // console.log(value);
        this.setState({ textContent: this.state.textContent + value.key });
    }

    // 切换显示表情组件
    toggleEmotion = () => {
        this.setState({ showEmotion: !this.state.showEmotion });
    }

    // 发动态
    submitTrend = async () => {
        // 1.获取用户的输入 文本 图片 当前位置  校验
        // 2.先将 选择的图片 上传到对应的接口地址 返回图片的在线地址
        // 3.将上面的数据 结合图片 一并提交到后台 完成动态的发布
        // 4.返回上一个页面 推荐页面
        const { textContent, location, longitude, latitude, tmpImgList } = this.state;
        if (!textContent || !location || !longitude || !latitude || !tmpImgList.length) {
            Toast.message('输入不合法');
            return;
        }

        // 图片上传的代码
        const imageContent = await this.uploadImage();

        const params = { textContent, location, longitude, latitude, imageContent }
        const res = await request.privatePost(QZ_DT_PUBLISH, params);
        // console.log(res);
        Toast.smile('动态发布成功');
        setTimeout(() => {
            this.props.navigation.reset({
                routes: [{ name: 'Tabbar', params: { pagename: 'group' } }]
            })
        }, 2000)
    }

    // 上传图片
    uploadImage = async () => {
        // 获取用户选择的图片
        const { tmpImgList } = this.state;
        if (tmpImgList.length) {
            const params = new FormData();
            tmpImgList.forEach(v => {
                const imgObj = {
                    uri: "file://" + v.path,
                    name: v.fileName,
                    type: "application/octet-stream"
                }
                params.append("images", imgObj);
            });

            const res = await request.privatePost(QZ_IMG_UPLOAD, params, {
                headers: {
                    "Content-type": "multipart/form-data;charset=utf-8"
                }
            });
            return Promise.resolve(res.data.map(v => ({ headImgShortPath: v.headImgShortPath })));
        } else {
            return Promise.resolve([]);
        }
    }

    render() {
        const { textContent, location, tmpImgList, showEmotion } = this.state
        return (
            <View style={{ flex: 1, backgroundColor: '#fff' }}>
                <THNav title="发动态" rightText="发帖"
                    onRightPress={this.submitTrend}
                />
                {/* 输入框 */}
                <TouchableOpacity
                    onPress={this.handleSetInputFocus}
                    style={{ height: '40%' }}>
                    <TextInput
                        ref={ref => this.refInput = ref}
                        placeholder="请填写动态(140字以内)"
                        multiline
                        value={textContent}
                        onChangeText={this.onChangeText}
                    />
                </TouchableOpacity>

                {/* 定位 */}
                <View style={{ alignItems: 'flex-end', height: pxToDp(40), justifyContent: 'center' }}>
                    <TouchableOpacity
                        onPress={this.getCurrentPosition}
                        style={{ flexDirection: 'row', alignItems: 'center' }}
                    >
                        <IconFont style={{ color: '#666', fontSize: pxToDp(16) }} name="iconlocation" />
                        <Text style={{ color: '#aaa', fontSize: pxToDp(12), marginLeft: pxToDp(5), marginRight: pxToDp(5) }}>{location || "你在哪里？"}</Text>
                    </TouchableOpacity>
                </View>

                {/* 相册 */}
                <View style={{ paddingLeft: pxToDp(10), paddingBottom: pxToDp(10) }}>
                    <ScrollView horizontal>
                        {tmpImgList.map((v, i) => <TouchableOpacity
                            key={i}
                            style={{ marginLeft: pxToDp(5), marginRight: pxToDp(5) }}
                            onPress={this.handleImageRemove.bind(this, i)}
                        >
                            <Image
                                source={{ uri: v.uri }}
                                style={{ width: pxToDp(50), height: pxToDp(50) }}
                            />
                        </TouchableOpacity>)}
                    </ScrollView>
                </View>

                {/* 工具栏 */}
                <View style={{ height: pxToDp(50), flexDirection: 'row', alignItems: 'center', backgroundColor: '#eee' }}>
                    <TouchableOpacity
                        onPress={this.handleSelectImage}
                        style={{ marginLeft: pxToDp(40), marginRight: pxToDp(40) }}
                    >
                        <IconFont style={{ fontSize: pxToDp(30), color: '#666' }} name="icontupian" />
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={this.toggleEmotion}
                    >
                        <IconFont style={{ fontSize: pxToDp(30), color: showEmotion ? "#df6a88" : "#666" }} name="iconbiaoqing" />
                    </TouchableOpacity>
                </View>

                {/* 表情组件 */}
                {showEmotion ? <Emotion onPress={this.handleEmotionSelect} /> : <></>}
            </View>
        );
    }
}

export default Index;